<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 1400px;
        margin: 0 auto;
        position: relative;
        padding: 70px;
        box-sizing: border-box;
    }
    
    .bt {
        width: 500px;
        height: 1200px;
        box-sizing: border-box;
        background-color: #e8edee;
        display: inline-block;
        position: absolute;
        top: 200px;
        left: 100px;
    }
    
    .bb {
        width: 450px;
        height: 550px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .aa {
        font-size: 32px;
        line-height: 70px;
    }
    
    .j {
        width: 550px;
        height: 1200px;
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: 200px;
        right: 120px;
    }
    
    .one {
        width: 250px;
        height: 100px;
        border: 4px solid black;
        padding-bottom: 20px;
        line-height: 30px;
        transform: all 5s;
    }
    
    .one:hover {
        transform: translate(4px, 5px) scale(0.5) rotate(45deg);
    }
    
    .cc {
        color: yellow;
        font-size: 40px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    .tow {
        width: 250px;
        height: 100px;
        border: 4px solid black;
        padding-bottom: 20px;
        position: absolute;
        top: 500px;
        line-height: 30px;
        animation: animate 5s ease 1s infinite normal;
    }
    
    .dd {
        color: yellow;
        font-size: 40px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    .wz {
        width: 200px;
        height: 80px;
        border: 4px solid yellow;
        padding-left: 35px;
        padding-bottom: 15px;
        box-sizing: border-box;
        margin: 0 auto;
        line-height: 10px;
        animation: move 5s 6s infinite alternate;
    }
    
    .ai {
        font-size: 30px;
        color: #000;
    }
    
    .ss {
        width: 450px;
        height: 150px;
    }
    
    .qq {
        font-size: 34px;
        line-height: 80px;
    }
    
    .gg {
        width: 400px;
        height: 500px;
        position: absolute;
        top: 650px;
    }
    
    .zz {
        font-size: 34px;
        line-height: 80px;
    }
    
    @keyframes move {
        0% {
            transform: rotate(20deg);
        }
        50% {
            transform: rotate(45deg);
        }
        100% {
            transform: rotate(-30deg);
        }
    }
    
    @keyframes animate {
        0% {
            transform: translate(10px, 0px);
        }
        25% {
            transform: translate(20px, 0px);
        }
        50% {
            transform: translate(30px, 0px);
        }
        75% {
            transform: translate(40px, 0px);
        }
        100% {
            transform: translate(50px, 0px);
        }
        from {
            background-color: rgb(240, 190, 27);
        }
        to {
            background-color: white;
        }
    }
</style>

<body>
    <div class="container">
        <div class="wz">
            <p class="ai">关于我的</p>
        </div>
        <div class="bt"><img src="头像.jpg" alt="头像" width="500px" height="700px">
            <div class="bb">
                <p class="aa">姓名：牛华梅<br>出生年月：2000.2.18 <br>国籍：中国 <br>学校：成都东软学院 <br>电话：19183024170 <br>邮箱：2904357120@QQ.com</p>
            </div>


        </div>
        <div class="j">
            <div class="one">
                <p class="cc">兴趣爱好</p>
            </div>
            <div class="ss">
                <p class="qq">喜欢听音乐，看书，尤其是悬疑推理小说。还喜欢旅游，画画。最喜欢的是动漫</p>
            </div>
            <div class="tow">
                <p class="dd">我的技能</p>
            </div>
            <div class="gg">
                <p class="zz">海报设计 <br>插画 <br>素描</p>
            </div>
        </div>

    </div>

</body>

</html>